<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>封装全屏插件</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    
    body {
        font-family: Arial, "Microsoft YaHei", sans-serif;
    }
    
    html,
    body {
        height: 100%;
        overflow: hidden;
    }
    
    #container,
    .sections,
    .section {
        height: 100%;
        position: relative;
    }
    
    #section0,
    #section1,
    #section2,
    #section3 {
        background-color: #000;
        background-size: cover;
        background-position: 50% 50%;
    }
    
    #section0 {
        background-image: url(jquery全屏插件写法/pc/images/1.jpg);
        color: #fff;
        text-shadow: 1px 1px 1px #333;
    }
    
    #section1 {
        color: #fff;
        text-shadow: 1px 1px 1px #333;
        background-image: url(jquery全屏插件写法/pc/images/2.jpg);
    }
    
    #section2 {
        background-image: url(jquery全屏插件写法/pc/images/3.jpg);
        color: #fff;
        text-shadow: 1px 1px 1px #666;
    }
    
    #section3 {
        color: #008283;
        background-image: url(jquery全屏插件写法/pc/images/4.jpg);
        text-shadow: 1px 1px 1px #fff;
    }
    
    #section0 p {
        color: #F1FF00;
    }
    
    #section3 p {
        color: #00A3AF;
    }
    
    .left {
        float: left;
    }
    
    h1 {
        font-size: 6em;
        font-weight: normal;
    }
    
    p {
        font-size: 2em;
        margin: 0.5em 0 2em 0;
    }
    
    .intro {
        position: absolute;
        top: 50%;
        width: 100%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
    }
    
    .pages {
        position: fixed;
        list-style: none;
    }
    
    .vertical.pages {
        right: 10px;
        top: 50%;
    }
    
    .horizontal.pages {
        left: 50%;
        bottom: 10px;
    }
    
    .pages li {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        margin: 10px 5px;
        cursor: pointer;
    }
    
    .horizontal.pages li {
        display: inline-block;
        vertical-align: middle;
    }
    
    .pages li.active {
        width: 14px;
        height: 14px;
        border: 2px solid #FFFE00;
        background: none;
        margin-left: 0;
    }
    
    #section0 .title {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
        animation: sectitle0 1s ease-in-out 100ms forwards;
    }
    
    #section0 p {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-animation: sec0 1s ease-in-out 100ms forwards;
        animation: sec0 1s ease-in-out 100ms forwards;
    }
    
    @-webkit-keyframes sectitle0 {
        0% {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }
    
    @keyframes sectitle0 {
        0% {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }
    
    @-webkit-keyframes sec0 {
        0% {
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }
    
    @keyframes sec0 {
        0% {
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }
    </style>
    <script src="jquery-1.7.2.min.js"></script>
</head>

<body>
    <div id="container" data-PageSwitch>
        <div class="sections">
            <div class="section active" id="section0">
                <div class="intro">
                    <h1 class="title">switchPage</h1>
                    <p>Create Beautiful Fullscreen Scrolling Websites</p>
                </div>
            </div>
            <div class="section" id="section1">
                <div class="intro">
                    <h1 class="title">Example</h1>
                    <p>HTML markup example to define 4 sections</p>
                </div>
            </div>
            <div class="section" id="section2">
                <div class="intro">
                    <h1 class="title">Example</h1>
                    <p>The plug-in configuration parameters</p>
                </div>
            </div>
            <div class="section" id="section3">
                <div class="intro">
                    <h1 class="title">THE END</h1>
                    <p>Everything will be okay in the end. If it's not okay, it's not the end.</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
(function($) {
    //定义私有方法
    var privateFun = function() {

    }
    var _prefix = (function(temp) {
        var aPrefix = ["webkit", "Moz", "o", "ms"],
            props = "";
        for (var i in aPrefix) {
            props = aPrefix[i] + "Transition";
            if (temp.style[props] !== undefined) {
                return "-" + aPrefix[i].toLowerCase() + "-";
            }
        }
        return false;
    })(document.createElement(PageSwitch));
    //匿名函数，就把这个功能独立出来，它里面的变量不会被外面的污染，它自己也不会污染全局。
    var PageSwitch = (function() {
        function PageSwitch(element, options) {
            //extend是将自定义的插件参数与插件多的默认参数合并
            this.settings = $.extend(true, $.fn.PageSwitch.defaults, options || {});
            this.element = element;
            this.init(); //调用，初始化插件
        }
        PageSwitch.prototype = {
            //初始化插件
            //初始化插件的dom结构，布局，分页以及绑定事件
            //有下划线的方法代表私有方法 ， 没有的则是共有方法
            init: function() {
                var me = this; //this就是pageswitch对象
                me.selectors = me.settings.selectors;
                me.sections = me.element.find(me.selectors.sections);
                me.section = me.sections.find(me.selectors.section);

                me.direction = me.settings.direction == "vertical" ? true : false;
                me.pagesCount = me.pagesCount();
                me.index = (me.settings.index >= 0 && me.settings.index < me.pagesCount) ? me.settings.index : 0;

                me.canscroll = true;

                if (!me.direction || me.index) {
                    me._initLayout();
                }

                if (me.settings.pagination) {
                    me._initPaging();
                }

                me._initEvent();
            },
            //获取滑动的页面数量
            pagesCount: function() {
                return this.section.length;
            },
            //获取滑动的高度（竖屏布局）或者宽度（横屏布局）
            switchLength: function() {
                return this.direction == 1 ? this.element.height() : this.element.width();
            },
            //向前滑动既上一页面
            prve: function() {
                var me = this;
                if (me.index > 0) {
                    me.index--;
                } else if (me.settings.loop) {
                    me.index = me.pagesCount - 1;
                }
                me._scrollPage();
            },
            //向后滑动既下一页面
            next: function() {
                var me = this;
                if (me.index < me.pagesCount) {
                    me.index++;
                } else if (me.settings.loop) {
                    me.index = 0;
                }
                me._scrollPage();
            },
            //主要针对横屏情况进行页面布局
            _initLayout: function() {
                var me = this;
                if (!me.direction) {
                    var width = (me.pagesCount * 100) + "%",
                        cellWidth = (100 / me.pagesCount).toFixed(2) + "%";
                    me.sections.width(width);
                    me.section.width(cellWidth).css("float", "left");
                }
                if (me.index) {
                    me._scrollPage(true);
                }
            },
            //实现分页的dom结构和css样式
            _initPaging: function() {
                var me = this,
                    pagesClass = me.selectors.page.substring(1);
                me.activeClass = me.selectors.active.substring(1);

                var pageHtml = "<ul class=" + pagesClass + ">";
                for (var i = 0; i < me.pagesCount; i++) {
                    pageHtml += "<li></li>";
                }
                me.element.append(pageHtml);
                var pages = me.element.find(me.selectors.page);
                me.pageItem = pages.find("li");
                me.pageItem.eq(me.index).addClass(me.activeClass);

                if (me.direction) {
                    pages.addClass("vertical");
                } else {
                    pages.addClass("horizontal");
                }
            },
            //初始化插件事件
            _initEvent: function() {
                var me = this;
                /*绑定鼠标滚轮事件*/
                me.element.on("mousewheel DOMMouseScroll", function(e) {
                    e.preventDefault();
                    var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
                    if (me.canscroll) {
                        if (delta > 0 && (me.index && !me.settings.loop || me.settings.loop)) {
                            me.prve();
                        } else if (delta < 0 && (me.index < (me.pagesCount - 1) && !me.settings.loop || me.settings.loop)) {
                            me.next();
                        }
                    }
                });


                /*绑定分页click事件*/
                me.element.on("click", me.selectors.page + " li", function() {
                    me.index = $(this).index();
                    me._scrollPage();
                });
                if (me.settings.keyboard) {
                    $(window).keydown(function(e) {
                        var keyCode = e.keyCode;
                        if (keyCode == 37 || keyCode == 38) {
                            me.prve();
                        } else if (keyCode == 39 || keyCode == 40) {
                            me.next();
                        }
                    });
                }
                /*绑定窗口改变事件*/
                /*为了不频繁调用resize的回调方法，做了延迟*/
                var resizeId;
                $(window).resize(function() {
                    clearTimeout(resizeId);
                    resizeId = setTimeout(function() {
                        var currentLength = me.switchLength();
                        var offset = me.settings.direction ? me.section.eq(me.index).offset().top : me.section.eq(me.index).offset().left;
                        if (Math.abs(offset) > currentLength / 2 && me.index < (me.pagesCount - 1)) {
                            me.index++;
                        }
                        if (me.index) {
                            me._scrollPage();
                        }
                    }, 500);
                });



                /*支持CSS3动画的浏览器，绑定transitionend事件(即在动画结束后调用起回调函数)*/
                if (_prefix) {
                    me.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function() {
                        me.canscroll = true;
                        if (me.settings.callback && $.type(me.settings.callback) === "function") {
                            me.settings.callback();
                        }
                    })
                }
            },

            /*滑动动画*/
            _scrollPage: function(init) {
                var me = this;
                var dest = me.section.eq(me.index).position();
                if (!dest) return;

                me.canscroll = false;
                if (_prefix) {
                    var translate = me.direction ? "translateY(-" + dest.top + "px)" : "translateX(-" + dest.left + "px)";
                    me.sections.css(_prefix + "transition", "all " + me.settings.duration + "ms " + me.settings.easing);
                    me.sections.css(_prefix + "transform", translate);
                } else {
                    var animateCss = me.direction ? {
                        top: -dest.top
                    } : {
                        left: -dest.left
                    };
                    me.sections.animate(animateCss, me.settings.duration, function() {
                        me.canscroll = true;
                        if (me.settings.callback) {
                            me.settings.callback();
                        }
                    });
                }
                if (me.settings.pagination && !init) {
                    me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
                }
            }
        };
        return PageSwitch;
    })();
    //动态开发,对象级别组件的开发
    $.fn.PageSwitch = function(options) {
        return this.each(function() {
            var me = $(this),
                instance = me.data("PageSwitch");

            if (!instance) {
                me.data("PageSwitch", (instance = new PageSwitch(me, options)));
            }

            if ($.type(options) === "string") return instance[options]();
        });
    };

    $.fn.PageSwitch.defaults = {
        selectors: {
            sections: ".sections",
            section: ".section",
            page: ".pages",
            active: ".active",
        },
        index: 0, //页面开始的索引
        easing: "ease", //动画效果
        duration: 500, //动画执行时间
        loop: false, //是否循环切换
        pagination: true, //是否进行分页
        keyboard: true, //是否触发键盘事件
        direction: "vertical", //滑动方向vertical,horizontal
        callback: "" //回调函数
    };


    //另一种初始化插件的方法，但是无法配置参数
    $(function() {
        $('[data-PageSwitch]').PageSwitch();
    });
})(jQuery); //形参是$符号，实参是jQuery对象
</script>
<!-- 插件的调用和传参 -->
<!-- <script>
$(function() {
    $('#container').PageSwitch();
});
//$("#container").PageSwitch("init"); //调用插件的init方法，因为是挂在原型链上，所以是公共方法
</script> -->

</html>
